import React, {Component} from 'react';
import {observer} from 'mobx-react';
import classnames from 'classnames';
import ReIcon from '../ReIcon';
import './MobileRightToolbar.less';


export default class View extends Component {


    constructor(props, context) {
        super(props, context);
    }

    render() {
        let {list = [], isShow = false} = this.props;
        let classname = classnames({
            'mobile-content-bar-content-wrapper': true,
            'hide-content-bar-top-content': !isShow,
        })
        let transitionValue = isShow ?
            ($$.utils.IsPC() ? 'opacity .1s linear,height .2s linear,visibility .1s linear' :
                'opacity .1s .4s linear,width .1s .1s linear,height .2s .3s linear,visibility .1s .2s linear') :
            'height .1s linear,visibility .1s .1s linear,opacity .1s .1s linear,width .1s .1s linear'
        let truList = list.filter((item) => item.showItem)
        return <div className={classname}
                    style={{
                        height: isShow ? truList.length * ($$.utils.IsPC() ? 50 : 35) : 0,
                        transition: transitionValue
                    }}>
            {
                truList && truList.map((item, index) => {
                    let itemClassname = classnames({
                        'item-wrapper ': true,
                    });
                    return item.showItem ?
                        <div className={item.className ? itemClassname + item.className : itemClassname}
                             key={index} onClick={item.onClick}>
                            <span className="icon-wrapper">
                                <ReIcon className={'icon'} icon={item.icon}/>
                            </span>
                            <span className="text">{item.name}</span>
                            <div className='line'></div>
                        </div> : null
                })
            }
        </div>
    }

}